Tailwind の peer で要素の状態の変化で、自身の後にくる兄弟要素のスタイルを変更する

CX 事業本部 Delivery 部フロントエンドチームの高橋ゆうきです。

最近は弊社でも Tailwind の採用事例が少しずつ増えてきた印象を受けています。

私自身も Tailwind を使う機会が少なくないのですが、なかなか頭に浮かんだ CSS をすぐに Tailwind で表現することに慣れません。

ここで紹介する peer は、v2.2 で導入されたもので、新しい機能ではないのですが知らないとなかなか利用できない機能なので紹介します。

peer

Tailwind の peer は自身の要素よりも後にくる兄弟要素の状態によって要素のスタイルを設定するときに使用されるクラスです。

次のコードは公式ドキュメントのコードをほぼそのまま持ってきたものです。

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer" value="error" />
    <p class="invisible mt-2 text-sm text-pink-600 peer-invalid:visible">
      Please provide a valid email address.
    </p>
  </label>
</form>

• tailwind PLAY

出力される CSS では次のように 一般兄弟結合子 (general sibling combinator) が使用されます。

.peer:invalid ~ .peer-invalid\:visible {
  visibility: visible;
}

利用可能な擬似クラスについては公式ドキュメントを参照ください。

利用例

デザインにこってしまうと長くなるので、最小限のクラス名にしています。

ホバーしたら出てくるツールチップ

<button class="hidden peer">button</button>
<div class="border-2 round-full peer-checked:border-blue">tooltip</div>

• tailwind PLAY

chip の checkbox

<br /><label for="example" class="peer-checked:border-green-500 cursor-pointer rounded-full border-2 p-2">chip</label>

• tailwind PLAY

peer に名前をつける

公式ドキュメントには Differentiating peers で記載されています。

次の例は公式ドキュメントのサンプルを転記したものです。

<fieldset>
  <legend>Published status</legend>


  <label for="draft" class="peer-checked/draft:text-sky-500">Draft</label>


  <label for="published" class="peer-checked/published:text-sky-500">Published</label>

  <div class="hidden peer-checked/draft:block">
    Drafts are only visible to administrators.
  </div>
  <div class="hidden peer-checked/published:block">
    Your post will be publicly visible on your site.
  </div>
</fieldset>

一般兄弟結合子を使っている都合上、HTML の構造がフラットになってしまうため少し使いにくいと感じています。

他にも Arbitrary peers というものもありますが、こちらは公式サイトを参照してください。

さいごに

peer の存在を知っていたのですが、peer で chip の checkbox をシンプルに作ることができることを思いつかなかったことがこの記事を書く動機になりました。

気づくきっかけになった Flowbite に感謝！